<template>
  <div class="account">
    <van-collapse v-model="activeNames" accordion>
      <van-cell-group>
        <van-cell title="账号" :value="userName" icon="user-o" />
      </van-cell-group>
      <van-collapse-item title="版本" name="1" icon="desktop-o">
        <h5>Edition：1.4</h5>
        <p>更新时间：</p>
        <span>2019-11-20</span>
        <span>修复购物车未登录结算跳转bug,并杀了一个后台祭天</span>
        <p>Power by Cyf</p>
      </van-collapse-item>
    </van-collapse>
    <van-button type="danger" @click="logout">退出登录</van-button>
    <common-head title="设置" rightText></common-head>
  </div>
</template>

<script>
import CommonHead from "components/CommonHead";
export default {
  data() {
    return {
      activeNames: ["1"],
      userName: ""
    };
  },
  mounted() {
    this.getName();
  },
  methods: {
    getName() {
      let name = localStorage.getItem("user");
      this.userName = name;
    },
    logout() {
      this.$dialog
        .confirm({
          title: "退出登录",
          message: "真的要离开我吗？"
        })
        .then(() => {
          localStorage.removeItem("user");
          this.$router.go(0);
        })
        .catch(() => {
          this.$toast({
            duration: 1000,
            message: "我果然没看错你~",
            icon: "like-o"
          });
        });
    }
  },
  components: {
    CommonHead
  }
};
</script>

<style lang="less" scoped>
.account {
  padding-top: 65px;
  /deep/ .van-cell {
    padding: 20px 18px;
    font-size: 16px !important;
    color: #333;
  }
  .van-button {
    width: 100%;
    height: 65px;
    position: fixed;
    -webkit-transform: translateZ(0);
    bottom: 0;
  }
}
</style>